<template>
  <div class="data-detail">
    <a-form :form="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
      <a-row justify="space-between">
        <!-- <a-col :span="20">
          <a-form-item label="时间区间" :wrapperCol="{ span: 18 }">
            <a-range-picker
              v-decorator="[
                'rangePicker',
                {
                  initialValue: [moment(), moment().add(1, 'days')],
                },
              ]"
              :placeholder="['开始日期', '结束日期']"
            />
          </a-form-item>
        </a-col> -->
        <a-col :span="20">
          <div style="dispaly: flex;margin-bottom:20px;">
            <span style="margin-right:1rem;">时间区间: </span>
            <a-date-picker v-model="startTime" show-time />
            -
            <a-date-picker v-model="endTime" show-time />
          </div>
        </a-col>
        <a-space>
          <a-button @click="resetForm">
            重置
          </a-button>
          <a-button :loading="isLoading" key="submit" type="primary" @click="handleQuery">
            查询
          </a-button>
        </a-space>
        <a-row justify="space-between">
          <a-col :span="21">
            <h3>{{ `[${advertPlanName}]详情列表` }}</h3>
          </a-col>
        </a-row>
      </a-row>
    </a-form>
    <a-table
      class="my-table"
      :loading="isLoading"
      :rowKey="(record) => record.slotName"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <span slot="ctr" slot-scope="_, record">
        {{ `${record.advertShowPv == 0 ? 0 : ((record.advertValidClick / record.advertShowPv) * 100).toFixed(2)}%` }}
      </span>
    </a-table>
  </div>
</template>
<script>
import 'moment/locale/zh-cn'
import moment from 'moment'
import { columns } from './DataDetail'
import { getAdvertPlanDataSlot } from '@/api/Advertising/api'
export default {
  name: 'DataDetail',
  mounted() {
    this.$nextTick(() => {
      const { advertPlanName, id } = this.$route.query
      this.advertPlanName = advertPlanName ?? ''
      this.id = id ?? ''
      this.advertPlanDataSlot({ id })
    })
  },
  data() {
    return {
      moment,
      columns,
      data: [],
      isLoading: false,
      id: '',
      advertPlanName: '',
      form: this.$form.createForm(this, { name: 'plan' }),
      startTime: moment(moment().format('YYYY-MM-DD')),
      endTime: moment(moment().format('YYYY-MM-DD')).add(1, 'days'),
      pagination: {
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => `总共  ${total} 条`, // 显示总数
      },
    }
  },
  methods: {
    /**
     * @func 列表数据
     */
    async advertPlanDataSlot(param) {
      this.isLoading = true
      const [err, data] = await getAdvertPlanDataSlot(param)
      if (!err) {
        const { list, count } = data
        if (list) {
          this.data = list ?? []
        }
        const pager = { ...this.pagination }
        pager.total = count
        this.pagination = pager
        this.isLoading = false
      } else {
        this.isLoading = false
        this.$msgErr(err)
      }
    },
    /**
     * @func 重置表单
     */
    resetForm() {
      const id = this.id
      this.form.resetFields()
      this.advertPlanDataSlot({ id })
      this.startTime = moment(moment().format('YYYY-MM-DD'))
      this.endTime = moment(moment().format('YYYY-MM-DD')).add(1, 'days')
    },
    /**
     * @func 表格改变时
     */
    async handleTableChange(pagination) {
      const id = this.id
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.advertPlanDataSlot({ id, pageNo: pagination.current, pageSize: pagination.pageSize })
    },
    /**
     * @func 查询数据
     */
    handleQuery(e) {
      e.preventDefault()
      const id = this.id
      this.form.validateFields((err, fieldsValue) => {
        if (!err) {
          for (let items in fieldsValue) {
            if (!fieldsValue[items]) {
              fieldsValue[items] = ''
            }
          }
          const values = {
            id,
            ...fieldsValue,
            startTime: moment(this.startTime).valueOf(),
            endTime: moment(this.endTime).valueOf(),
          }
          this.advertPlanDataSlot(values)
        }
      })
    },
  },
}
</script>
<style scoped></style>
